<script setup name="addRole">
import { reactive, ref, } from "vue";
import department from "@/plugins/data/department";
import personnel_data from "@/plugins/data/personnel_data";
import router from "@/router";

const tableData = ref([])
const getTableData = () => {
  tableData.value = personnel_data.getList()
  console.log(tableData.value)
}
getTableData()

const options = reactive(department)
let ruleForm = ref({
  name: '',
  empower: [],
  personnel: [],
  department: '',
  remake: '',
})

const callBackDisabled = (data) => {
  const nArr = []
  ruleForm.value.empower.forEach(item => {
    const num = data.disabledList ? data.disabledList.indexOf(item) : -1
    num !== -1 ? nArr.push(num) : ''
  })
  return nArr.length !== 0
}

const departmentProps = reactive({
  label: 'name',
  value: 'id'
})

const rules = reactive({
  name: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
  ],
  empower: [
    {
      required: true,
      message: '请选择权限',
      trigger: 'change',
    },
  ],
  department: [
    {
      required: true,
      message: '请选择部门',
      trigger: 'change',
    },
  ]
})
const ruleFormRef = ref(null)
function goPostDataFun() {

  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log(ruleForm)
      router.push('/role')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const defaultProps = reactive({
  children: 'children',
  label: 'label',
  disabled: callBackDisabled,
})

function cancelFun() {
  ruleFormRef.value && ruleFormRef.value.resetFields()
}

const data = ref([
  {
    value: '1',
    label: '人员管理',
    children: [
      {
        value: '1-1',
        label: '办理入职',
        children: [],
        disabledList: ['3-2']
      },
      {
        value: '1-2',
        label: '办理离职',
        children: [],
        disabledList: []
      },
      {
        value: '1-3',
        label: '修改人员信息',
        children: [],
        disabledList: []
      },
      {
        value: '1-4',
        label: '调职',
        children: [],
        disabledList: []
      },
    ],
  },
  {
    value: '2',
    label: '角色管理',
    children: [
      {
        value: '2-1',
        label: '添加角色',
        children: [],
        disabledList: []
      },
      {
        value: '2-2',
        label: '修改角色信息',
        children: [],
        disabledList: ['3-2']
      },
      {
        value: '2-3',
        label: '绑定人员',
        children: [],
        disabledList: []
      },
    ],
  },
  {
    value: '3',
    label: '部门管理',
    children: [
      {
        value: '3-1',
        label: '合并部门',
        children: [],
        disabledList: []
      },
      {
        value: '3-2',
        label: '新增部门',
        children: [],
        disabledList: [
          '1-1', '2-2'
        ]
      },
    ],
  },
])



</script>

<template>
  <div class="addRole">
    <div class="addRole_model">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" :validate-on-rule-change="false"
        class="demo-ruleForm" size="large" status-icon>
        <div class="addRole_model_body">
          <el-divider content-position="left">基本信息</el-divider>
          <div class="addRole_model_body_content">
            <el-form-item label="角色名称" prop="name">
              <el-input style="width: 500px" v-model="ruleForm.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="权限" prop="empower">
              <el-tree-select placeholder="请选择权限信息" style="width: 500px" v-model="ruleForm.empower" :data="data"
                :props="defaultProps" multiple :render-after-expand="false" show-checkbox />
            </el-form-item>
            <el-form-item label="所属部门" prop="department">
              <el-cascader style="width: 500px" placeholder="请选择部门" :props="departmentProps" filterable
                v-model="ruleForm.department" :options="options" />
            </el-form-item>
            <el-form-item label="需绑定的人员" prop="personnel">
              <el-select style="width: 500px" placeholder="请选择需绑定的人员" v-model="ruleForm.personnel">
                <el-option v-for="item in tableData" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="角色备注" prop="remake">
              <el-input style="width: 500px" v-model="ruleForm.remake" :autosize="{ minRows: 4, maxRows: 10 }"
                type="textarea" />
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="addRole_footer">
      <el-button size="large" @click="cancelFun()">取 消</el-button>
      <el-button type="primary" size="large" @click="goPostDataFun()">确 定</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.addRole {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  left: 6px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);

  .addRole_model {
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: 10px;
    height: calc(100% - 50px);

    .addRole_model_body_title {
      font-size: 18px;
      width: max-content;
      box-sizing: border-box;
      padding: 10px 50px 10px 0;
      border-bottom: 1px solid deepskyblue;
    }

    .addRole_model_body_content {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      padding: 15px 0;

      .operate {
        width: 100%;
        height: 100%;
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        align-items: center;
        font-size: 22px;
      }
    }
  }

  .addRole_footer {
    text-align: center;
    box-sizing: border-box;
    padding: 0 25px;
    width: 100%;
    height: 50px;
  }
}
</style>
<style lang="scss">
.addRole {
  .el-button {
    border-radius: 0;

  }

  .el-button--primary {
    background-color: cornflowerblue;
  }

  .el-radio-button__original-radio:checked+.el-radio-button__inner {
    background-color: cornflowerblue;
  }
}
</style>